/* ---------------------------------------------------订单页------------------------------------------------------------- */
/* 引入react */
import { PureComponent } from 'react';
/* 引入affirm.css */
import '../assent/css/order.css'
/* 引入react-vant */
import { SwipeCell, Flex, Image, Typography, SubmitBar } from 'react-vant';
/* 引入icon图标 */
import { Space } from 'react-vant';
import { ArrowLeft } from '@react-vant/icons';
class Affirm extends PureComponent {
    constructor() {
        super()
    }
    render() {

        return (
            <div id='affirm'>
                <header className='header'>
                    {/* 头部导航 */}
                    <div className='top'>
                        <Space className='demo-icon' gap={20}>
                            <ArrowLeft spin />
                        </Space>
                        <p>确认订单</p>
                    </div>
                    {/* 地址 */}
                    <div className='bottom'>
                        <div className='userinfo'><span>代用名</span><span>188****8888</span></div>
                        <div className='location'>北京 北京市 昌平区 朱辛庄中公教育实训基地IT教学楼 2号楼 2202室</div>
                    </div>
                </header>
                {/* 主体内容 */}
                <main>
                    <div className='title'>
                        <h3>品牌精选</h3>
                        <div>
                            <span>以免运费</span>|<span className='giftCoupon'>领券</span>
                        </div>
                    </div>
                    {/* 购物车数据 */}
                    <div className='cart'>
                        <SwipeCell
                        >
                            <Flex className="demo-product-card" align="stretch">
                                <Image src="https://img.yzcdn.cn/vant/ipad.jpeg" className="demo-product-card__img" />
                                <Flex direction="column" justify="between" className="demo-product-card__content">
                                    <div>
                                        <Typography.Title level={5}>商品标题</Typography.Title>
                                        <Typography.Text type="secondary">这里是商品描述</Typography.Text>
                                    </div>
                                    <Flex justify="between" align="center">
                                        <Typography.Text strong size="lg">
                                            ¥2.00
                                        </Typography.Text>
                                        <Typography.Text size="sm" type="secondary">
                                            x2
                                        </Typography.Text>
                                    </Flex>
                                </Flex>
                            </Flex>
                        </SwipeCell>
                        <SwipeCell
                        >
                            <Flex className="demo-product-card" align="stretch">
                                <Image src="https://img.yzcdn.cn/vant/ipad.jpeg" className="demo-product-card__img" />
                                <Flex direction="column" justify="between" className="demo-product-card__content">
                                    <div>
                                        <Typography.Title level={5}>商品标题</Typography.Title>
                                        <Typography.Text type="secondary">这里是商品描述</Typography.Text>
                                    </div>
                                    <Flex justify="between" align="center">
                                        <Typography.Text strong size="lg">
                                            ¥2.00
                                        </Typography.Text>
                                        <Typography.Text size="sm" type="secondary">
                                            x2
                                        </Typography.Text>
                                    </Flex>
                                </Flex>
                            </Flex>
                        </SwipeCell>
                        <SwipeCell
                        >
                            <Flex className="demo-product-card" align="stretch">
                                <Image src="https://img.yzcdn.cn/vant/ipad.jpeg" className="demo-product-card__img" />
                                <Flex direction="column" justify="between" className="demo-product-card__content">
                                    <div>
                                        <Typography.Title level={5}>商品标题</Typography.Title>
                                        <Typography.Text type="secondary">这里是商品描述</Typography.Text>
                                    </div>
                                    <Flex justify="between" align="center">
                                        <Typography.Text strong size="lg">
                                            ¥2.00
                                        </Typography.Text>
                                        <Typography.Text size="sm" type="secondary">
                                            x2
                                        </Typography.Text>
                                    </Flex>
                                </Flex>
                            </Flex>
                        </SwipeCell>

                    </div>
                </main>
                {/* 底部提交订单 */}
                <footer>
                    <div className="demo-submit-bar"><SubmitBar price="3050" buttonText="提交订单" onSubmit={() => this.onSubmit()} /></div>
                </footer>
            </div>
        );
    }
    /* 提交订单 */
    onSubmit() {
        console.log(111);
    }

}
export default Affirm